<template>
  <div>
    <Card>
      <Row>
        <i-col span="8">
          <Input placeholder="输入关键字过滤，支持多种类型字段过滤"
                 @on-change="handleSearch()"
                 size='small'
                 v-model="inputval" />
        </i-col>
        <i-col span="6">
          <Button type="primary"
                  size='small'
                  class="exportdata"
                  @click="exportData(1)">
            导出数据
          </Button>
        </i-col>
      </Row>
    </Card>
    <Card>
      <!-- <div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
                <Select v-model="searchKey" class="search-col">
                    <Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
                </Select>
                <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue" />
                <Button @click="handleSearch" class="search-btn" type="primary">
                    <Icon type="search" />&nbsp;&nbsp;搜索</Button>
      </div>-->
      <!-- <Button type="primary" size="large" @click="exportData(2)">
      <Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>-->
      <!-- <Button type="primary" size="large" @click="exportData(3)">
      <Icon type="ios-download-outline"></Icon>导出自定义数据</Button>-->
      <!-- <Button type="primary" size="large" @click="handleSelectAll(true)">选择所有</Button>
      <Button type="primary" size="large" @click="handleSelectAll(false)">取消选择</Button>-->
      <!-- <Button type="error" size="large" @click="handleDelete()">删除数据</Button> -->
      <i-table border
               editable
               searchable
               search-place="top"
               :columns="columns"
               :data="table"
               ref="table"></i-table>
    </Card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      inputval: "",
      tableData: [],
      self: this,
      baseUrl: BASEURL,
      columns: [
        // {
        //   type: "selection",
        //   width: 60,
        //   align: "center"
        // },
        {
          title: "UID",
          key: "uid",
          fixed: "left",
          prop: "uid",
          width: 80
        },
        {
          title: "数据名称",
          key: "name",
          fixed: "left",
          prop: "name",
          width: 240
        },
        {
          title: "数据类型",
          key: "type",
          width: 100
        },
        {
          title: "采集时间",
          key: "cdate",
          width: 100
        },
        {
          title: "中心点-经度",
          key: "cen_lon",
          width: 120
        },
        {
          title: "中心点-纬度",
          key: "cen_lat",
          width: 120
        },
        {
          title: "范围（左上角经度）",
          key: "l_on_lon",
          width: 180
        },
        {
          title: "范围（左上角纬度）",
          key: "l_on_lat",
          width: 180
        },
        {
          title: "范围（右下角经度）",
          key: "r_d_lon",
          width: 180
        },
        {
          title: "范围（右下角纬度）",
          key: "r_d_lat",
          width: 180
        },
        {
          title: "采集人",
          key: "author",
          width: 100
        },
        {
          title: "存放位置",
          key: "cpath",
          width: 100
        },
        {
          title: "录入人",
          key: "recordp",
          width: 100
        },
        {
          title: "录入时间",
          key: "rtime",
          width: 100
        },
        {
          title: "数据格式",
          key: "format",
          width: 100
        },
        {
          title: "服务地址",
          key: "sname",
          width: 100
        },
        {
          title: "说明信息",
          key: "details",
          width: 300
        },
        {
          title: "查看",
          key: "action",
          width: 140,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            // h 是 createElement 的通用惯例写法
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      var data = this.tableData[params.index];
                      if (data.l_on_lat != "" && data.cen == "") {
                        alert("不参与绘制");
                      } else if (data.cen_lon != "") {
                        var cen_lon = data.cen_lon;
                        var cen_lat = data.cen_lat;
                        this.center = [cen_lon, cen_lat];
                        debugger
                        this.$router.push({
                          path: "/map",
                          query: { value: data }
                        });
                      } else {
                        alert("不参与绘制");
                      }
                    }
                  }
                },
                "地图中查看"
              )
            ]);
          }
        }
      ]
    };
  },
  mounted () {
    this.getData();
  },
  computed: {
    table () {
      // return this.tableData
      return this.tableData.filter(d => {
        if (
          d.name.indexOf(this.inputval) > -1 ||
          d.type.indexOf(this.inputval) > -1 ||
          d.cdate.indexOf(this.inputval) > -1 ||
          d.author.indexOf(this.inputval) > -1 ||
          d.format.indexOf(this.inputval) > -1
        ) {
          return d;
        }
      });
    }
  },
  methods: {
    getData () {
      let q_url = this.baseUrl + "/getbasedata";
      this.$axios.get(q_url).then(res => {
        console.log(res)
        this.tableData = res.data;
      });
    },
    show (index) {
      this.$Modal.info({
        //
      });
    },
    remove (index) {
      this.tableData.splice(index, 1);
      console.log(index);
    },
    exportData (type) {
      if (type === 1) {
        this.$refs.table.exportCsv({
          filename: "The original data"
        });
      } else if (type === 2) {
        this.$refs.table.exportCsv({
          filename: "Sorting and filtering data",
          original: false
        });
      } else if (type === 3) {
        this.$refs.table.exportCsv({
          filename: "Custom data",
          columns: this.columns.filter((col, index) => index < 40),
          data: this.tableData.filter((data, index) => index < 4)
        });
      }
    },
    handleSelectAll (status) {
      this.$refs.table.selectAll(status);
    },
    handleDelete () {
      this.$refs.table.splice();
    },
    handleSearch () {
      //
    }
  }
};
</script>
<style lang='scss'>
.exportdata {
  margin-left: 10px;
}
</style>
